<template>
	<div class="bbs-menu" :class='{showNav:shownav}'>
		<section>
			<div class="menu-header">
				<i :class="shownav ? 'el-icon-s-unfold' : 'el-icon-s-fold'" @click="nav"></i>
				<router-link to='/' class=logotoindex>
					<img src="../../assets/bbs/topbar-logo.png" alt="">
				</router-link>
			</div>
			<div class="sthlist">
				<ul>
					<li @click="hotchoose" :class="{'choose':hot}">热门话题</li>
					<li @click="weekhotchoose" :class="{'choose':weekhot}">一周内热贴</li>
				</ul>
			</div>
			<div class="sthlistinfo">
				<ul v-show="hot">
					<li>果小姐的慢生活之多瑙河畔的巡礼</li>
					<li>【cd在日本】关键词：界，伊豆，河津樱 「2月里的河津早樱│河津七泷瀑布温泉│界Anjin│界仙石原」</li>
					<li>【Yolanda游记】2019年·从波兰到芬兰一路向北穿梭波罗的海三国（波兰/立陶宛/拉脱维亚/爱沙尼亚/芬兰）</li>
					<li>【台湾.竟是這樣美好||肆④】在这个飘雨的冬季.台湾跨年自驾之旅（台北.花莲.绿岛.高雄.阿里山.附台北跨年烟火攻略）</li>
					<li>【逆光航海】印度洋单身生存指南|与海洋光谱号重走香料之路</li>
				</ul>
				<ul v-show="weekhot">
					<li>魅力之都——维也纳VIENNA</li>
					<li>四天四夜带你轻松玩转里斯本&波尔图</li>
					<li>从科隆到慕尼黑——冬季德国自驾之旅</li>
					<li>记忆中的斯堪的纳维亚——17天盛夏挪威峡湾+罗弗敦群岛自驾之旅（全文完！跟帖发攻略！）</li>
					<li>【观鲸 滑索 骑行 赏樱】加拿大BC省的极致体验之旅</li>
				</ul>
			</div>
			<h3 class="bbs-titleclass">
				穷游兴趣小组
			</h3>
			<div class="bbs-hobygroup">
				<div class="groupInfo">
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/2.png" alt="">
						<span>结伴同游</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/3.png" alt="">
						<span>结伴同游</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/4.png" alt="">
						<span>结伴同游</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/5.png" alt="">
						<span>结伴同游</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/2.png" alt="">
						<span>结伴同游</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/5.png" alt="">
						<span>结伴同游</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/4.png" alt="">
						<span>结伴同游</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/3.png" alt="">
						<span>结伴同游</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/4.png" alt="">
						<span>结伴同游</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/2.png" alt="">
						<span>结伴同游</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/5.png" alt="">
						<span>结伴同游</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/3.png" alt="">
						<span>结伴同游</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/2.png" alt="">
						<span>结伴同游</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/5.png" alt="">
						<span>结伴同游</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/3.png" alt="">
						<span>结伴同游</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/4.png" alt="">
						<span>结伴同游</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/2.png" alt="">
						<span>结伴同游</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/5.png" alt="">
						<span>结伴同游</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/2.png" alt="">
						<span>结伴同游</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/3.png" alt="">
						<span>结伴同游</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/4.png" alt="">
						<span>结伴同游</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/2.png" alt="">
						<span>结伴同游</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/3.png" alt="">
						<span>结伴同游</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/5.png" alt="">
						<span>结伴同游</span>
					</router-link>
				</div>
			</div>
			<h3 class="bbs-asia">
				穷游亚州
			</h3>
			<div class="bbs-asiagroup">
				<div class="asiaInfo">
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/6.png" alt="">
						<span>穷游亚州</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/7.png" alt="">
						<span>穷游亚州</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/8.png" alt="">
						<span>穷游亚州</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/9.png" alt="">
						<span>穷游亚州</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/8.png" alt="">
						<span>穷游亚州</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/7.png" alt="">
						<span>穷游亚州</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/8.png" alt="">
						<span>穷游亚州</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/6.png" alt="">
						<span>穷游亚州</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/9.png" alt="">
						<span>穷游亚州</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/7.png" alt="">
						<span>穷游亚州</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/6.png" alt="">
						<span>穷游亚州</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/9.png" alt="">
						<span>穷游亚州</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/7.png" alt="">
						<span>穷游亚州</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/8.png" alt="">
						<span>穷游亚州</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/6.png" alt="">
						<span>穷游亚州</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/9.png" alt="">
						<span>穷游亚州</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/6.png" alt="">
						<span>穷游亚州</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/7.png" alt="">
						<span>穷游亚州</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/8.png" alt="">
						<span>穷游亚州</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/6.png" alt="">
						<span>穷游亚州</span>
					</router-link>
				</div>
			</div>
			<h3 class="bbs-america">
				穷游美州
			</h3>
			<div class="bbs-americagroup">
				<div class="americaInfo">
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/10.png" alt="">
						<span>穷游美州</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/11.png" alt="">
						<span>穷游美州</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/12.png" alt="">
						<span>穷游美州</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/6.png" alt="">
						<span>穷游美州</span>
					</router-link>
				</div>
			</div>
			<h3 class="bbs-america">
				穷游大洋州
			</h3>
			<div class="bbs-americagroup">
				<div class="americaInfo">
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/10.png" alt="">
						<span>穷游大洋州</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/11.png" alt="">
						<span>穷游大洋州</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/12.png" alt="">
						<span>穷游大洋州</span>
					</router-link>
				</div>
			</div>
			<h3 class="bbs-america">
				穷游非州
			</h3>
			<div class="bbs-americagroup">
				<div class="americaInfo">
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/10.png" alt="">
						<span>穷游非州</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/11.png" alt="">
						<span>穷游非州</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/12.png" alt="">
						<span>穷游非州</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/6.png" alt="">
						<span>穷游非州</span>
					</router-link>
				</div>
			</div>
			<h3 class="bbs-america">
				线上线下
			</h3>
			<div class="bbs-americagroup">
				<div class="americaInfo">
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/10.png" alt="">
						<span>线上线下</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/11.png" alt="">
						<span>线上线下</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/12.png" alt="">
						<span>线上线下</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/6.png" alt="">
						<span>线上线下</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/6.png" alt="">
						<span>线上线下</span>
					</router-link>
				</div>
			</div>
			<h3 class="bbs-america">
				后院
			</h3>
			<div class="bbs-americagroup">
				<div class="americaInfo">
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/15.png" alt="">
						<span>后院</span>
					</router-link>
					<router-link to='' class='groupInfoList'>
						<img src="../../assets/bbs/16.png" alt="">
						<span>后院</span>
					</router-link>
				</div>
			</div>
			<bbsFooter></bbsFooter>
			<div v-if="shownav" class="mask" @click="shrink"></div>
		</section>
	</div>

</template>


<script type="text/javascript">
	import bbsFooter from '@/components/bbs/bbsFooter'
    export default {
        name:'bbsMenu',
        components:{
            'bbsFooter':bbsFooter
        },
        data(){
        	return{
        		shownav:false,
        		activeName:'first',
        		hot:true,
        		weekhot:false
        	}
        },
        methods:{
        	nav(){
        		this.shownav=!this.shownav
        		this.$emit("shownavs",this.shownav)
        		// console.log(this.shownav)
        	},
        	shrink(){
        		this.shownav=false;
        		this.$emit("shownavs",this.shownav)
        	},
        	hotchoose(){
        		this.hot=true;
        		this.weekhot=false;
        	},
        	weekhotchoose(){
        		this.hot=false;
        		this.weekhot=true;
        	}
        }
    }
</script>

<style type="text/css" scoped lang="less">
	.bbs-menu{
		position:absolute;
		width:100vw;
		overflow-x:hidden;
		left:0px;
		height:100vh;
		overflow-y:auto;
		transition:all 0.5s;
		section{
			position:absolute;
			width:100%;
			.menu-header{
				width:100%;
				height:44px;
				background-color: #2bab79;
				i{
					display: block;
					width:35%;
					float:left;
					margin-left: 0.2em;
					color:white;
					font-size:24px;
					height:44px;
					line-height: 44px;
				}
				.logotoindex{
					display:block;
					float: left;
					width:30%;
					height:44px;
					img{
						height:100%;
					}
				}
				
			}
			.sthlist{
				ul{
					list-style: none;
					margin:0;
					padding-left:10px;
					height:40px;
					border-bottom:1px solid #e6e8ea; 
					li{
						float:left;
						padding: 10px 15px;
						
						background-color: white;
					}
					.choose{
						color:green;
						background-color:white;
						position:relative;
					}
					.choose::after{
						position:absolute;
						bottom:-6px;
						left:35px;
						transform:rotate(45deg);
						z-index:-1;
						content:'';
						display:block;
						width:15px;
						height:15px;
						border:1px solid #e6e8ea;
						background-color: white;
					}
				}
			}
			.sthlistinfo{
				ul{
					list-style: none;
					margin:0;
					padding:0;
					li{
						padding:5px 15px;
						height:40px;
						line-height: 40px;
						overflow:hidden;
						white-space:nowrap;
						text-overflow: ellipsis;
						font-size: 1.1em;
					}
				}
			}
			.bbs-titleclass,.bbs-asia,.bbs-america{
				margin:0;
				padding:10px;
				border-top:solid 1px #e6e6ea;
				border-bottom:solid 1px #e6e8ea;
			}
			.bbs-hobygroup,.bbs-asiagroup,.bbs-americagroup{
				padding:2px 10px;
				.groupInfo,.asiaInfo,.americaInfo{
					overflow: hidden;
					.groupInfoList{
						float:left;
						width:50%;
						height:70px;
						overflow: hidden;
						line-height: 18px;
						color: #494949;
						font-size:0.8em;
						padding:16px 6px;
						border-bottom: 1px solid #EEEFF1;
						img{
							float:left;
							height:40px;
							width:40px;
						}
						span{
							display:inline-block;
							margin-left: 0.5em;
							height:40px;
							line-height:40px;
						}
					}
					.groupInfoList:nth-child(odd){
						border-right:1px solid #EEEFF1;
					}
				}
			}
			.mask{
				position:absolute;
				width:100vw;
				height:100%;
				overflow-y:auto;
				z-index: 100;
			}
		}
	}
	.showNav{
		left:250px;
	}
</style>
